<template>
  <!-- 圆环 -->
  <div class="lkring">
    <canvas id="canvas"></canvas>
  </div>
</template>

<script>
export default {
  name:'lkring',
  props:['state'],
  mounted(){
    this.setRing()
  },
  methods:{
    setRing(){
      let canvas = document.getElementById('canvas');
      let context = canvas.getContext("2d");
      context.lineWidth = 2;
      context.strokeStyle = "#ccc";
      context.beginPath();
      context.arc(50,50,40,0,0.75*Math.PI);
      context.stroke()
    }
  }
}
</script>

<style lang="less" scoped>
  .lkring{
    height:100%;width:100%;margin:0 auto;
    canvas{
      height:100%;width:100%;
    }
  }
</style>